<script setup>
import { onMounted, ref } from "vue";
import useRoute from "@/hooks/route";
import { onLoad } from "@dcloudio/uni-app";
import { messageDetailApi } from "@/services/message";
import cloneDeep from "lodash/cloneDeep";

// route query
const routeQuery = ref(0);
const locaghosttext = ref("");
// #ifdef H5
locaghosttext.value = window.location.protocol + "//" + window.location.host;
// #endif

// init data loading
const initDataLoading = ref(true);
// api得到的数据 展示
const showDetail = ref({});

// init
const initData = async () => {
  try {
    initDataLoading.value = true;
    let res = await messageDetailApi({ id: Number(routeQuery.value) });
    showDetail.value = res.data;
    initDataLoading.value = false;
  } catch (error) {
    initDataLoading.value = false;
  }
};
const show = ref(false);

onLoad((e) => {
  // 获取路由参数
  routeQuery.value = e.id;
  initData();
});

const closepopup = () => {
  show.value = false;
};

const btSumbit = (url) => {
  let newurl = url ? url : "/pages/index/index";
  show.value = false;
  if (newurl != "/pages/index/index") {
    uni.navigateTo({
      url: newurl,
    });
  } else {
    uni.switchTab({
      url: newurl,
    });
  }
};
</script>

<template>
  <view class="container">
    <!-- scroll view -->
    <scroll-view class="scroll-view" scrollY>
      <view class="content">
        <!-- v-if="!initDataLoading" -->
        <view v-if="!initDataLoading">
          <!-- showDetail.title -->
          <uni-title
            type="h3"
            :title="showDetail.title"
            class="content-title"
          ></uni-title>
          <view class="date-warp">
            <text class="date-text">{{ showDetail.create_time }}</text>
          </view>
          <view class="fgx"> </view>
          <view>
            <text class="message-text">{{ showDetail.type_text }}</text>
          </view>
          <view class="message-dec">
            <text>{{ showDetail.content }}</text>
          </view>

          <view
            class="message-url"
            @click="show = true"
            v-if="showDetail.message.url"
          >
            <!-- #ifdef H5 -->
            <text>{{
              locaghosttext +
              (showDetail.message.url ? showDetail.message.url : "")
            }}</text>
            <!-- #endif -->

            <!-- #ifdef MP-WEIXIN -->
            <text
              >{{ showDetail.message.url ? showDetail.message.url : "" }}
            </text>
            <!-- #endif -->
          </view>
        </view>

        <!-- v-else -->
        <view v-else>
          <up-skeleton rows="6" loading animate></up-skeleton>
        </view>
      </view>
    </scroll-view>
    <br />
  </view>
  <view class="password_show">
    <u-popup :show="show" mode="center" round="10" @close="close" @open="open">
      <view class="popup-content">
        <view class="popup-content-title">{{ showDetail.type_text }}</view>
        <view class="popup-content-dec">{{ showDetail.title }}</view>
        <view class="popup-content-bt">
          <view class="popup-content-qx" @click="closepopup">取消</view>
          <view
            class="popup-content-cl"
            @click="btSumbit(showDetail.message.url)"
            >立即处理</view
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<style lang="scss" scoped>
@import "./Index.scss";
</style>
